<template>
	<div class="content">
		<h2><i class="iconfont icon-jinbi"></i>商户银行卡审核</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<div class="search__list">
					<div class="search__list--title search__list--title-tip">审核状态</div>
					<el-select v-model="params.is_agree" @change="selctCheckState" size="mini">
						<el-option label="全部" :value="-1" ></el-option>
						<el-option label="未审核" value=""></el-option>
						<el-option label="审核通过" value="1"></el-option>
						<el-option label="审核驳回" value="0"></el-option>
						<el-option label="授权书驳回" value="2"></el-option>
					</el-select>
				</div>
			</div>
			<!--商品展示表格-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="data" strip size="mini">
					<el-table-column label="用户名称" prop="member.real_name"></el-table-column>
					<el-table-column label="手机号码" prop="member.mobile"></el-table-column>
					<el-table-column label="身份证号" prop="member.id_no"></el-table-column>
					<el-table-column label="商户名称" prop="company.company_name"></el-table-column>
					<el-table-column label="账户类型" prop="bank_card_type"></el-table-column>
					<el-table-column label="银行开户名" prop="bank_card_name"></el-table-column>
					<el-table-column label="银行卡号" prop="card_no"></el-table-column>
					<el-table-column label="开户总行" prop="bank"></el-table-column>
					<el-table-column label="开户支行" prop="bank_name"></el-table-column>
					<el-table-column label="状态" align="center" width="150">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.is_agree == 1" size="small">审核通过</el-tag>
							<el-tag type="danger" v-else-if="scope.row.is_agree == 0" size="small">审核驳回</el-tag>
							<el-tag type="danger" v-else-if="scope.row.is_agree == 2" size="small">授权书审核驳回</el-tag>
							<el-tag type="warning" v-else-if="scope.row.bank_card_type == '企业'" size="small">等待审核</el-tag>
							<span class="tag_custom" v-else>银行卡三要素验证通过，等待资质审核</span>
						</template>
					</el-table-column>
					<el-table-column label="驳回原因" prop="reject_reason"></el-table-column>
					<el-table-column label="操作" align="center" width="400">
						<template slot-scope="scope">
							<el-button 
								v-if="null == scope.row.is_agree"
								size="mini"
								@click="agreeBankCard(scope.row.bank_card_id)"
								 type="success">
								 同意
							</el-button>
							<el-button 
								v-if="null == scope.row.is_agree"
								size="mini"
								@click="rejectBankCard(scope.row.bank_card_id)"
								 type="danger">
								 拒绝
							</el-button>
							<el-button 
								size="mini"
								@click="checkBankCard(scope.row.company.company_id)"
								 type="danger" >
								 验证银行卡
							</el-button>
							<el-button 
								size="mini"
								@click="showImgs(scope.row)">
								 查看图片
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination 
				@current-change="handleCurrentChange"
				background 
				layout="total, prev, pager, next, jumper"
				:total="totalNum" 
				class="fr"
				>
			</el-pagination>
			<div class="model" v-if="showImgsModel">
				<h2 class="model__title">
					查看图片
					<span @click="showImgsClose" class="model__title--close">&times;</span>
				</h2>
				<div class="model__content" v-loading="loading">
					<div class="item">
						<h2 class="item__title">银行卡授权书</h2>
						<div v-if="bank_auth_img">
							<img :src="bank_auth_img.thump+'400'" class="item__pic--img" @click="showBigImg(bank_auth_img.url)"/>
						</div>
						<div v-else>无</div>
					</div>
					<div class="item">
						<h2 class="item__title">开户许可证</h2>
						<div v-if="bank_open_img">
							<img :src="bank_open_img.thump+'400'" class="item__pic--img" @click="showBigImg(bank_open_img.url)"/>
						</div>
						<div v-else>无</div>
					</div>
				</div>
			</div>
			<big-img v-if="isShowBigImg" :imgUrl="bigImgUrl"></big-img>
		</div>
	</div>
</template>

<script>
	import big_img from "../../components/big_img.vue"
	export default {
		created() {
			this.loadData();
		},
		components: {
			"big-img": big_img,
		},
		data() {
			return {
				params: {
					is_agree: -1,
					page: 1,
					rows: 10
				},
				data: null,			
				loading: true,
				bank_card_id: null,
				totalNum: 0,
				bank_auth_img_url: null,
				bank_open_img_url: null,
				showImgsModel: false,
				bigImgUrl: null,
				isShowBigImg: false
			}
		},
		methods: {
			selctCheckState(is_agree) {
				this.loadData();
			},
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.loadData();
			},
			loadData() {
				this.loading = true;
				var url = `${this.url}/bankcard/bankcard_get_company_list.action`;
				var params = this.params;
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					this.totalNum = res.data.result.total;
					this.data = res.data.result.rows;
				});
			},
			agreeBankCard(id) {
				this.$confirm("请仔细核对信息是否正确！再同意申请！该操作不可回退！", "同意申请", {
					cancelButtonText: '取消',
					confirmButtonText: "确定",
				}).then(({ value })=> {
					this.loading = true;
					var url = `${this.url}/bankcard/bankcard_check.action`;
					var params = {
						bank_card_id: id,
						is_agree: 1
					};
					this.$http.get(url,{ params }).then((res)=> {
						this.loading = false;
						if( res.data.success ) {
							this.$message({
								type: "success",
								message: "操作成功"
							});
						}else {
							this.$message({
								type: "error",
								message: res.data.result.errmsg
							});
						}
						this.loadData();
					});
				});
			},
			rejectBankCard(id) {
				this.$prompt("请填写拒绝理由", "拒绝申请", {
					cancelButtonText: '取消',
					confirmButtonText: "确定",
				}).then(({ value })=> {
					if (value === null || value.replace(/\s/g, "") === "") {
						this.$message({
							type: "error",
							message: "请填写拒绝理由"
						});
						return;
					}
					var url = `${this.url}/bankcard/bankcard_check.action`;
					var params = {
						bank_card_id: id,
						is_agree: 0,
						reject_reason: value
					};
					this.$http.get(url,{ params }).then((res)=> {
						this.loading = false;
						if( res.data.success ) {
							this.$message({
								type: "success",
								message: "操作成功"
							});
						}else {
							this.$message({
								type: "error",
								message: res.data.result.errmsg
							});
						}
						this.loadData();
					});
				}).catch(()=>{
				});
			},
			checkBankCard(company_id) {
				var url = `${this.url}/bankcard/bankcard_check_company_card.action`;
				var params = {
					company_id: company_id
				};
				this.$http.get(url,{ params }).then((res)=> {
					if( res.data.success ) {
						this.$message({
							type: "success",
							message: '银行卡三要素验证通过'
						});
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			showImgs(row) {
				this.bank_auth_img = row.bank_auth_img;
				this.bank_open_img = row.bank_open_img;
				this.showImgsModel = true;
			},
			showImgsClose() {
				this.showImgsModel = false;
			},
			showBigImg(imgUrl) {
				this.bigImgUrl = imgUrl;
				this.isShowBigImg = true;
			}
		}

	}
</script>

<style scoped lang="scss">
span.tag_custom {
	border: 1px solid rgba(64,158,255,.2);
	background-color: rgba(230,162,60,.1);
	border-color: rgba(230,162,60,.2);
	color: #e6a23c;
	font-size: 12px;
	padding: 0 8px;
	line-height: 22px;
	border-radius: 4px;
	box-sizing: border-box;
	display: inline-block;
}
</style>